XMLHttpRequest Methods: open(), send()

XMLHttpRequest অবজেক্টের দুটি গুরুত্বপূর্ণ মেথড হলো open() এবং send()। এই মেথডগুলো Ajax রিকোয়েস্ট তৈরি এবং সার্ভারের সাথে ডেটা এক্সচেঞ্জ করার প্রক্রিয়ায় প্রধান ভূমিকা পালন করে। নিচে open() এবং send() মেথডের বিস্তারিত আলোচনা করা হলো:

১. open() মেথড

ভূমিকা:

• open() মেথড XMLHttpRequest অবজেক্টে HTTP রিকোয়েস্ট সেটআপ করার জন্য ব্যবহৃত হয়। এটি রিকোয়েস্টের ধরন (যেমন GET বা POST), URL এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাসভাবে রিকোয়েস্টটি কাজ করবে কিনা, তা নির্ধারণ করে।

Syntax:

xhr.open(method, url, async);

প্যারামিটারসমূহ:

১. method: এটি রিকোয়েস্টের HTTP মেথড নির্দেশ করে। সাধারণ মেথডগুলো হলো:

• "GET": ডেটা আনার জন্য।
• "POST": ডেটা সার্ভারে পাঠানোর জন্য।

২. url: সার্ভারের URL যেখান থেকে ডেটা ফেচ করা হবে বা যেখানে ডেটা পাঠানো হবে। এটি হতে পারে একটি API বা JSON ফাইলের লিঙ্ক।

৩. async: এটি একটি বুলিয়ান প্যারামিটার যা নির্ধারণ করে রিকোয়েস্টটি অ্যাসিনক্রোনাস (true) নাকি সিঙ্ক্রোনাস (false) হবে।

• true: অ্যাসিনক্রোনাস রিকোয়েস্ট (প্রায় সব ক্ষেত্রে ব্যবহার করা হয়)।
• false: সিঙ্ক্রোনাস রিকোয়েস্ট (প্রায় কখনোই ব্যবহার করা হয় না, কারণ এটি পেজ ফ্রিজ করে দিতে পারে)।

উদাহরণ:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);

বিস্তারিত:

• "GET" মেথড ব্যবহার করে ডেটা ফেচ করার জন্য রিকোয়েস্ট সেট করা হয়েছে।
• "https://example.com/api/data" URL থেকে ডেটা ফেচ করা হবে।
• true মানে রিকোয়েস্টটি অ্যাসিনক্রোনাসভাবে চলবে, অর্থাৎ পেজ রিলোড বা ফ্রিজ না করেই রিকোয়েস্ট প্রসেস হবে।

২. send() মেথড

ভূমিকা:

• send() মেথড XMLHttpRequest অবজেক্ট ব্যবহার করে সার্ভারে রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়। এটি open() মেথড কল করার পর ব্যবহার করা হয় এবং এটি সার্ভারের সাথে রিকোয়েস্ট শুরু করে।

Syntax:

xhr.send(body);

প্যারামিটারসমূহ:

• body: এটি ঐচ্ছিক এবং সাধারণত POST রিকোয়েস্টের জন্য ব্যবহৃত হয়। এটি সার্ভারে পাঠানোর ডেটা ধারণ করে।
  • GET রিকোয়েস্টের জন্য send() মেথডে কোনো প্যারামিটার লাগবে না।
  • POST রিকোয়েস্টের জন্য JSON, ফর্ম ডেটা বা টেক্সট হিসেবে ডেটা পাঠানো যায়।

উদাহরণ:

GET রিকোয়েস্টের জন্য:

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "https://example.com/api/data", true); 
xhr.send();

• এখানে send() মেথড কোনো প্যারামিটার ছাড়াই কল করা হয়েছে, কারণ এটি একটি GET রিকোয়েস্ট।

POST রিকোয়েস্টের জন্য:

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
var data = JSON.stringify({ name: "John", age: 30 });
xhr.send(data);

এখানে send(data) মেথডে JSON ডেটা প্যারামিটার হিসেবে পাঠানো হয়েছে, যা সার্ভারে সাবমিট হবে।

open() এবং send() এর সংক্ষিপ্ত ব্যবহারের ধাপ:

1. open(): প্রথমে, এটি রিকোয়েস্ট টাইপ, URL, এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস সেট করে।
2. send(): তারপর, এটি রিকোয়েস্টটি সার্ভারে পাঠায়।

সম্পূর্ণ উদাহরণ:

function fetchData() {
    var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // রিকোয়েস্ট ওপেন করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
            console.log(data);
        }
    };
    xhr.send(); // রিকোয়েস্ট পাঠানো
}

• open() মেথডের মাধ্যমে রিকোয়েস্ট সেটআপ করা হয়েছে এবং send() মেথডের মাধ্যমে রিকোয়েস্টটি সার্ভারে পাঠানো হয়েছে।
• রেসপন্স পাওয়ার পর onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে তা প্রসেস করা হয়েছে।

সারসংক্ষেপ:

• open(): রিকোয়েস্ট সেটআপ করার জন্য ব্যবহৃত হয় (HTTP মেথড, URL, এবং অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস নির্ধারণ)।
• send(): রিকোয়েস্টটি সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়।

open() এবং send() মেথড একসাথে ব্যবহার করে Ajax রিকোয়েস্ট তৈরি এবং পরিচালনা করা হয়, যা ওয়েব পেজকে ডায়নামিকভাবে আপডেট করতে এবং ইউজার ইন্টারফেসে ডেটা প্রসেস করতে সহায়ক।